<template>
  <div class="container">
    <div class="echart_box">
      <!--  图表子组件  -->
      <PieSimple1
        :chilData="this.parentData"
      />
      <!--  图表子组件  -->
      <PieSimple2
      />
      <div class="text_box">
        <div>
          <h4>当前管理员人数</h4>
          <span>
            {{ this.parentData.total }}
          </span>
        </div>
        <div>
          <h4>当前注册用户</h4>
          <span>
            {{ this.dataMessage.user }}
          </span>
        </div>
      </div>
    </div>
    <!-- 折线图 -->
    <linestack
    />
  </div>
</template>

<script>
import PieSimple1 from "@/views/echart/PieSimple1.vue"
import PieSimple2 from "@/views/echart/PieSimple2.vue"
import linestack from "@/views/echart/LineStack.vue"
import request from "@/utils/request";

export default {
  components:{
    PieSimple1,PieSimple2,linestack
  },
  name:"echart",
  created(){
    this.load();
  },
  methods:{
    load() {
      request.get("/admin/alldata" ).then(res => {
        if (res.code === '0') {
          res.data.forEach( (elememt) =>{
            this.parentData.total ++;
            if (elememt.gender == '女' ){
              this.parentData.male ++;
            }else {
              this.parentData.famale ++;
            }
          })
          console.log("amdin的总人数",this.total);
          console.log("男性的总人数",this.famale);
          // this.total = res.data.total;
          // localStorage.setItem("adminTotal",this.total);
        }
      });
    }
  },
  data(){
    return{
      parentData:{
        total:0,
        male:0,
        famale:0,
      },
      dataMessage:{
        admin:localStorage.getItem("adminTotal") || 0 ,
        user:localStorage.getItem("userTotal") || 0,
      }
    }
  }
}
</script>

<style scoped>

.echart_box{
  padding: 40px;
  height: 350px;
  display: flex;
  justify-content: space-between;
  /* float: right; */
}

.text_box{
  padding: 30px 10px;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.text_box span{
  font-size: 30px;
  font-weight: bold;
}

</style>